import { Component } from 'react';
import { Icon,InputGroup,Tree,Tooltip,Divider,Tabs,Tab, Button,RadioGroup,Radio } from '@blueprintjs/core';
import styles from './RightPane.less';
import ScrollWrapper from '../../../components/ScrollWrapper';
import Blank from '../../../components/Blank';
import {DMDZ} from '../../../utils/i18';
import classNames from 'classnames';
import { connect } from 'dva';
import PdfModal from './PdfModal';
import {replaceAll} from '../../../utils/util';
import config from '../../../config';

class PropertiesPane extends Component {
	constructor(props) {
		super(props);
		this.state = {
			tab: 'attibute',
			position: 'right',
			pdfUrl: '',
			pdfName: ''
		}
	}

	handlePositionChange = (event) => {
		this.setState({position: event.target.value})
	}

	handleTabChange = (val) => {
		this.setState({tab: val})
	}

	getAttributeList = (feature) => {
		if(!feature) return [];
		let keys = Object.keys(feature).map((key) => {return {key, index: -1}});
		keys.forEach((key) => {
			// if(key.key === "name") key.index = 0;
			// if(key.key === "district") key.index = 1;
			// if(key.key === "streets") key.index = 2;
			// if(key.key === "diminglu") key.index = 3;
			// if(key.key === "erpu") key.index = 4;
			// // if(key.key === "overview") key.index = 6;
			// if(key.key === "olddb") key.index = 5;
			if(key.key === "redfiles") key.index = 6;
      if(key.key === "comment") key.index = 0;
		});
		keys = keys.filter(key => key.index >= 0).sort((a, b) => {
			return a.index - b.index
		});
		return keys.map((key) => {
			let value = feature[key.key];
			value = replaceAll(value, '�', '');
			value = replaceAll(value, '#N/A', '暂无');
			value = value.replace(/(\r\n|\n|\r)/gm, "<br>");
			return {
				// key: DMDZ[key.key] || key.key,
				key: (DMDZ[key.key] || key.key) === "红头文件" ? "红头文件" : "",
				value: value
			}
		})
	}

	showPdf = (pdfUrl,pdfName) => {
    if(pdfUrl) {
      if((pdfUrl.lastIndexOf("/") + 1) !== pdfUrl.length) {
        pdfUrl = pdfUrl + "/"
      }
      pdfjsLib.getDocument(pdfUrl).then(() => {
        this.setState({pdfUrl,pdfName})
      }).catch(() => {
        this.setState({pdfUrl: "",pdfName})
      })
    } else {
      this.setState({pdfUrl,pdfName})
    }
	}
	render () {
		const { feature, closeAttributePane,rightPanPosition } = this.props;
		if(!feature) return null;
		const {name,point} = feature;
		// 属性面板
		const list = this.getAttributeList(feature);
		const attributePane = (<div className={styles.scrollWrapper}>
			<ScrollWrapper className={styles.scroll}>
				<div className={styles.attributeList}>
					<table>
						<tbody>
							{list.map((item, index) => {
								return (<tr key={index}
                style={
                  (item.key === "红头文件") ? {display:'none'} : {/* rightPanPosition === "center" && (index === 1 || index === 0) ? {display:'none'} : {} */}
                }
                className={"info-" + index}>
									<td>
										<h5>{item.key}</h5>
										<p dangerouslySetInnerHTML = {{ __html: item.value }}></p>
									</td>
								</tr>)
							})}
						</tbody>
					</table>
				</div>
			</ScrollWrapper>
		</div>);

		// 发文
		const fileField = list.filter((obj) => obj.key === '红头文件')[0];
		let files = ((fileField && fileField.value) || '').split(",").filter(k => k !== "暂无");
		const filePane = (<div className={styles.scrollWrapper}>
			<ScrollWrapper className={styles.scroll}>
				<ul className={styles.pdf}>
					{/* <Blank desc="无发文" /> */}
					{
						files.length === 0 && <Blank desc="无发文" />
					}
					{
						files.map((file,idx) => {
							return <li key={idx} onClick={() => {
								this.showPdf(config.host + 'dm/pdf/' + file, file);
							}}>
								{file && file !== '暂无' && `《${file}》`}
							</li>
						})
					}
				</ul>
			</ScrollWrapper>
		</div>);

		//配置
		const settingPane = (<div className={styles.scrollWrapper}>
			<ScrollWrapper className={styles.scroll}>
				<div className={styles.setting}>
					<RadioGroup
						label="属性位置:"
						onChange={this.handlePositionChange}
						selectedValue={this.state.position}
					>
						<Radio label="居中" value="center" />
						<Radio label="居右" value="right" />
					</RadioGroup>
				</div>
			</ScrollWrapper>
		</div>)

		// 附件
		const attachmentPane = (<div className={styles.scrollWrapper}>
			<ScrollWrapper className={styles.scroll}>
			<Blank desc="无附件" />
			</ScrollWrapper>
		</div>);
		let mainStyles;
		if(rightPanPosition === 'center' && point && point.x && point.y) {
			let top = point.y,
				left = point.x + 320,
				right = 0,bottom = 0;
			const width = document.body.clientWidth,
				  height = document.body.clientHeight;
		    if(top > 120) {
				top = 70;
			}
			if(left + 300 > width) {
				right = 20;
			}
			if(right) {
				mainStyles = {
					top,right
				}
			} else {
				mainStyles = {
					top,left,
					height: "50%",
					minHeight: "300px",
					maxHeight: "800px"
				}
			}
		}
    setTimeout(() => {
      $('.rightinfo-drag').draggabilly({
      	containment: 'body',
      	handle: '.rightinfo-drager'
      });
      if(rightPanPosition === 'right') {
        $('.rightinfo-drag').draggabilly('disable')
      }
    },200)
		return (
			<div className={classNames(styles.main, 'rightinfo-drag', (rightPanPosition === 'center' ? styles.centermain : styles.rightmain + ' no-drag'))}
				style={mainStyles}>
				<PdfModal isOpen={Boolean(this.state.pdfName)} pdfUrl={this.state.pdfUrl}
				 title={this.state.pdfName} handleClose={() => {this.showPdf()}} />
				<div className={styles.wrapper}>
					<div className="rightinfo-drager">
						<h5 className="text-overflow"><Icon icon="map-marker" style={{marginRight: "5px"}}></Icon>{name || "地名"}</h5>
					</div>
					<div>
						<Tabs id="PropertiesTabs"
							selectedTabId={this.state.tab}
							onChange={this.handleTabChange}
						>
							<Tab id="attibute"
								title={<span className={styles.title}><Icon icon="properties" />&nbsp;详情</span>}
								panel={attributePane} />
							<Tab id="file"
								title={<span className={styles.title}><Icon icon="book" />&nbsp;发文</span>}
								panel={filePane} />
							{/* <Tab id="setting"
								title={<span className={styles.title}><Icon icon="cog" />&nbsp;配置</span>}
								panel={settingPane} /> */}
							{/* <Tab id="attachment"
								title={<span className={styles.title}><Icon icon="document" />&nbsp;附件</span>}
								panel={attachmentPane} />
							<Tabs.Expander /> */}
						</Tabs>
					</div>
					<div className={styles.close}>
						<Button small minimal icon={<Icon icon="cross" iconSize={20} color="#888888" />} title="关闭" onClick={closeAttributePane} />
					</div>
				</div>
			</div>
		)
	}
}

function mapStateToProps(state) {
    return {
        rightPanPosition: state.map.rightPanPosition
    };
}

export default connect(mapStateToProps)(PropertiesPane);
